"use client";

import React, { useEffect } from "react";
import Image from "next/image";
import { Button } from "@/components/ui/button";
import { Plus } from "lucide-react";
import { usePathname } from "next/navigation";
import Link from "next/link";
import {
  UserButton,
  useUser,
} from "@clerk/nextjs";


const Header = () => {
  const path = usePathname();
  const { user, isSignedIn } = useUser();

  useEffect(() => {
    console.log(path);
  }, [path]);

  return (
    <div className="fixed top-0 z-10 h-24 flex justify-between w-full p-6 px-10 shadow-xs">
      <div className="flex items-center gap-10">
        <Image
          src="/logoipsum-317.svg"
          width={120}
          height={100}
          alt="logo"
          className=" fill-primary text-primary"
        />
        <ul className="hidden gap-10 md:flex">
          <Link
            href="/"
            className={`${
              path === "/" && "text-primary"
            } hover:text-primary/80 text-sm font-medium cursor-pointer`}
          >
            For Sale
          </Link>

          {/* <li className="text-sm font-medium cursor-pointer hover:text-primary">
            For Sale
          </li> */}
          <li className="text-sm font-medium cursor-pointer hover:text-primary">
            For Rent
          </li>
          <li className="text-sm font-medium cursor-pointer hover:text-primary">
            Agent Finder
          </li>
        </ul>
      </div>
      <div className="flex items-center gap-2">
       
          <Button>
            <Plus className="size-5" />
            Post Your Ad
          </Button>
 
        {isSignedIn ? (
          <>
            <UserButton />
          </>
        ) : (
          <Link href="/sign-in">
            <Button variant={"outline"}>Login</Button>
          </Link>
        )}
      </div>
    </div>
  );
};

export default Header;
